﻿<template>
    <div class="content-body">
        <template v-if="ctype==1">
            <text-content v-model="textContent" :disabled="disabled" v-bind="$attrs"></text-content>
        </template>
        <template v-if="ctype==2">
            <image-uploader v-model="photo" :max="maxPhoto"  v-bind="$attrs" style="min-height:100px; min-width:100px;" :ext-data="formData" :disabled="disabled"></image-uploader>
        </template>
        <template v-if="ctype==3">
            <file-uploader v-model="file" :max="maxFile" v-bind="$attrs" :ext-data="formData" :disabled="disabled"></file-uploader>
        </template>
        <template v-if="ctype==4">
            <medial-file v-model="video" :max="1" v-bind="$attrs" :ext-data="formData" :disabled="disabled"></medial-file>
        </template>
        <div class="content-delete" v-if="!disabled && removeable" @click="removeSelf">
            <i class="del-icon" >X</i>
        </div>
    </div>
</template>

<script>

    export default {
        name: "ContentEdit",
        props: {
            ctype: {
                type: Number,
            },
            modelValue: String,
            disabled: {
                type: Boolean,
                default: false
            },
            modelName: String,
            maxFile: {
                type: Number,
                default: 1
            },
            maxPhoto: {
                type: Number,
                default: 3,
            },
            removeable: {
                type: Boolean,
                default: true
            }
        },
        emits: ["update:modelValue","remove"],
        data() {
            return {
                formData: {
                    modelName: "ThemeFiles",
                    thumbSize:100
                }
            }
        },
        created() {
            this.formData.modelName = this.modelName || "unkown";
        },
        methods: {
            del(item) {
                this.fileList.splice(this.fileList.indexOf(item),1)
            },
            removeSelf() {
                $msg.confirm("确定要删除吗？").then(() => {
                    this.$emit("remove")
                })
            }

        },

        computed: {
            textContent: {
                get() {
                    if (this.ctype == 1) {
                        return this.modelValue
                    }
                    return ""
                },
                set(value) {
                    if (this.ctype == 1) {
                        this.$emit("update:modelValue", value)
                    }
                }
            },
            file: {
                get() {
                    if (this.ctype == 3) {
                        return this.modelValue
                    }
                    return "";
                },
                set(value) {
                    if (this.ctype == 3) {
                        this.$emit("update:modelValue", value)
                    }
                }
            },
            video:{
                get() {
                    if (this.ctype == 4) {
                        return this.modelValue
                    }
                    return "";
                },
                set(value) {
                    if (this.ctype == 4) {
                        this.$emit("update:modelValue", value)
                    }
                }
            },
            photo: {
                get() {
                    if (this.ctype == 2) {
                        return this.modelValue
                    }
                    return ""
                },
                set(value) {
                    if (this.ctype == 2) {
                        this.$emit("update:modelValue", value)
                    }
                }

            },
        },
        watch: {
            modelName(newValue) {
                this.formData.modelName = newValue;
            }
        }

    }
</script>

<style>
    .content-body {
        /* border: 1px dashed #cecece;
        padding: 4px; */
        display: block;
        position: relative;
    }

    .content-delete {
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #1989fa;
        border-radius: 0 0 0 18px;
    }

    .del-button {
        position: absolute;
        top: -4px;
        right: -4px;
        color: #fff;
        font-size: 16px;
        transform: scale(0.5);
    }

    .uploadImgButton {
        font-size: 72px;
        border: 1px dashed #cecece;
        padding: 8px;
    }
    .del-icon {
        position: absolute;
        top: -7px;
        right: 2px;
        color: #fff;
        font-size: 14px;
    }
</style>